<template>
    <el-row class="menuMan">
        <el-row type="flex" style="height: 40px;margin-bottom: 14px;position: relative">
<!--            <el-input placeholder="请输入内容" style="width: 300px;margin-right: 20px;"></el-input>-->
<!--            <el-button type="primary" style="width: 100px;">搜索</el-button>-->
            <el-button type="primary" @click="addFirstMenu" style="width: 100px;position: absolute;right: 0;">新增菜单
            </el-button>
        </el-row>
        <el-table
                :data="menuData"
                style="width: 100%;font-size: 16px;"
                height="730"
                max-height="730"
                row-key="uuid"
                :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                border
                highlight-current-row
                :default-expand-all="false"
                :tree-props="{children: 'subMenus', hasChildren: 'hasChildren'}">
            <el-table-column prop="name" label="名称" min-width="180"></el-table-column>
            <el-table-column prop="alias" label="别名" min-width="180"></el-table-column>
            <el-table-column prop="url" label="URL地址" min-width="180"></el-table-column>
            <el-table-column prop="inx" label="排序序号" min-width="180"></el-table-column>
            <el-table-column prop="enabled" label="生效状态" width="180">
                <template slot-scope="scope">
                    {{ ( scope.row.enabled === true ) ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column prop="visible" label="是否可见" width="180">
                <template slot-scope="scope">
                    {{ ( scope.row.visible === true ) ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="addMenu(scope.row)" style="font-size: 16px;line-height: 10px;">新增</el-button>
                    <el-button type="text" size="mini" @click="editMenu(scope.row)" style="font-size: 16px;line-height: 10px;">修改</el-button>
                    <el-button type="text" size="mini" v-if="!scope.row.subMenus" @click="removeMenu(scope.row)" style="font-size: 16px;line-height: 10px;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <transition name="el-fade-in">
            <floatingBox v-show="editBoxShow">
                <addFirstMenu v-if="addFirstShow" slot="edit" @editState="editState"></addFirstMenu>
                <addMenu v-if="addShow" slot="edit" :menuUuid="uuid" @editState="editState"></addMenu>
                <editMenu v-if="editShow" slot="edit" :menuUuid="uuid" @editState="editState"></editMenu>
            </floatingBox>
        </transition>
    </el-row>
</template>
<script>
    import floatingBox from "../../public/floatingBox.vue";
    import addFirstMenu from "./addFirstMenu.vue";
    import editMenu from "./editMenu.vue";
    import addMenu from "./addMenu.vue";

    export default {
        name: "menuMan",
        components: {floatingBox, addFirstMenu, addMenu, editMenu},
        data() {
            return {
                editBoxShow: false,
                addFirstShow: false,
                addShow: false,
                editShow: false,
                defaultExpandAll: false,
                menuData: [],
                menuEdit: false,
                uuid: '',
                menuProps: {
                    children: 'subMenus',
                    label: 'name'
                }
            };
        },
        mounted() {
            this.queryMenu();
        },
        methods: {
            refreshPage() {
                this.$router.replace({
                    path: '/refresh',
                    query: {
                        t: Date.now()
                    }
                })
            },
            editState(msg) {
                this.editBoxShow = msg;
                this.addFirstShow = msg;
                this.editShow = msg;
                this.addShow = msg;
                this.menuEdit = msg;
                this.refreshPage();
            },
            addFirstMenu() {
                this.editBoxShow = true;
                this.addFirstShow = true;
            },
            addMenu(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.addShow = true;
                this.menuEdit = true;
            },
            editMenu(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
                this.menuEdit = true;
            },
            menuChge(val) {
                if (this.menuEdit) {
                    this.uuid = val.uuid;
                }
            },
            //删除菜单节点
            removeMenu(val) {
                this.$confirm('确认删除 ' + val.name + " ?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.request({
                        method: "delete",
                        url: "./kwp/kdi/menu/" + val.uuid,
                        data: {}
                    }).then(() => {
                        this.refreshPage();
                        this.$message({
                            message: "删除成功!",
                            type: 'success'
                        });
                    }).catch(error => {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //查询总量菜单
            queryMenu() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/menu/search/findAllTree",
                    params: {}
                }).then(response => {
                    console.log(response)
                    this.menuData = response.data;
                }).catch(error => {
                    console.log(error);
                });
            }
        }

    }
</script>
<style scoped>
    .menuMan {
        margin-right: 30px;
    }

    .menuTreeBtn {
        font-size: 14px;
        cursor: pointer;
        color: #66b1ff;
    }

    .menuTreeBtn:hover {
        color: #8AC4FF;
    }
</style>
